/**
 * @Title: UserModal.js
 * @Description: UserModal
 * @author: Fanchao
 * @date: 2020/11/11 2:04 下午
 * @version V1.0
 */

import React, { memo, useState } from "react";
import { connect } from "umi";
import { Form, Input, Modal, Select, Cascader, message, TreeSelect } from "antd";
import { getMajorDirectionList } from "api/index";

const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 18 }
};

const { Option } = Select;
const UserModal = memo(({ course: { itemData, treeData, teacherOptions, trainingTypeList }, dispatch, title, visible }) => {
    const [majorDirectionList, setMajorDirectionList] = useState([]);
    const [form] = Form.useForm();
    form.setFieldsValue({
        courseName: itemData.courseName,
        courseCategory: itemData.courseCategory,
        planClassHours: itemData.planClassHours,
        teacherUserId: itemData.teacherUserId
    });

    const fetchMajorDirectionList = async (filter) => {
        const result = await getMajorDirectionList({ trainingTypeId: filter });
        if (result.status === "success") {
            const majorDirectionList = result.result;
            setMajorDirectionList(majorDirectionList);
        } else {
            message.error(result.message);
        }
    };
    return (
        <Modal
            title={title}
            visible={visible}
            width="900px"
            onOk={() => {
                form.validateFields().then(values => {
                    if (itemData.teacherUserId) {
                        values.courseId = itemData.courseId;
                        // values.leastDepartmentId = values.leastDepartmentId.pop();
                        dispatch({
                            type: "course/updateCourse",
                            payload: values,
                            callback: (result) => {
                                if (result) {
                                    form.resetFields();
                                    dispatch({
                                        type: "course/setItemData",
                                        payload: {}
                                    });
                                    dispatch({
                                        type: "course/setModalVisible",
                                        payload: false
                                    });
                                    dispatch({
                                        type: "course/getDataSource",
                                        payload: {
                                            keyword: "",
                                            reqPageInfo: {
                                                pageNumber: 1,
                                                pageSize: 10
                                            }
                                        }
                                    });
                                }
                            }
                        });
                    } else {
                        // values.leastDepartmentId = values.leastDepartmentId.pop();
                        dispatch({
                            type: "course/addCourse",
                            payload: values,
                            callback: (result) => {
                                if (result) {
                                    form.resetFields();
                                    dispatch({
                                        type: "course/setItemData",
                                        payload: {}
                                    });
                                    dispatch({
                                        type: "course/setModalVisible",
                                        payload: false
                                    });
                                    dispatch({
                                        type: "course/getDataSource",
                                        payload: {
                                            keyword: "",
                                            reqPageInfo: {
                                                pageNumber: 1,
                                                pageSize: 10
                                            }
                                        }
                                    });
                                }
                            }
                        });
                    }
                }).catch(info => {
                });
            }}
            onCancel={() => {
                form.resetFields();
                dispatch({
                    type: "course/setItemData",
                    payload: {}
                });
                dispatch({
                    type: "course/setModalVisible",
                    payload: false
                });
            }}
        >
            <Form
                {...layout}
                layout="horizontal"
                form={form}
                name="basic"
                // 表单默认值，只有初始化以及重置时生效 莫用
                initialValues={{}}
            >

                <Form.Item
                    label="任务类型"
                    name="trainingTypeId"
                    rules={[{ required: true, message: "必填" }]}
                >
                    <Select
                        placeholder="任务类型"
                        onChange={(e) => {
                            fetchMajorDirectionList(e);
                        }}
                    >
                        {
                            trainingTypeList.map(item => {
                                return <Option key={item.trainTypeId}
                                               value={item.trainTypeId}>{item.trainingTypeName}</Option>;
                            })
                        }
                    </Select>
                </Form.Item>
                <Form.Item
                    label="专业方向"
                    name="majorDirectionId"
                    rules={[{ required: true, message: "必填" }]}
                >
                    <Select
                        placeholder="专业方向"
                    >
                        {
                            majorDirectionList.map(item => {
                                return <Option key={item.majorDirectionId}
                                               value={item.majorDirectionId}>{item.majorName}</Option>;
                            })
                        }
                    </Select>
                </Form.Item>
                <Form.Item
                    label="课程名称"
                    name="courseName"
                    rules={[{ required: true, message: "必填" }]}
                >
                    <Input placeholder="课程名称"/>
                </Form.Item>

                <Form.Item
                    label="计划总学时"
                    name="planClassHours"
                    rules={[{ required: true, message: "必填" }]}
                >
                    <Input placeholder="计划总学时"/>
                </Form.Item>
                <Form.Item
                    label="理论学时"
                    name="theoryClassHours"
                    rules={[{ required: true, message: "必填" }]}
                >
                    <Input placeholder="理论学时"/>
                </Form.Item>
                <Form.Item
                    label="实践学时"
                    name="practiceClassHours"
                    rules={[{ required: true, message: "必填" }]}
                >
                    <Input placeholder="实践学时"/>
                </Form.Item>

                <Form.Item
                    label="运行学期"
                    name="runSemester"
                    rules={[{ required: true, message: "必填" }]}
                >
                    <Select
                        placeholder="运行学期"
                    >
                        <Option value="1">1</Option>
                        <Option value="2">2</Option>
                        <Option value="3">3</Option>
                        <Option value="4">4</Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    label="考核方式"
                    name="checkWay"
                    rules={[{ required: true, message: "必填" }]}
                >
                    <Select
                        placeholder="考核方式"
                    >
                        <Option value="考试">考试</Option>
                        <Option value="考查">考查</Option>
                    </Select>
                </Form.Item>

                <Form.Item
                    label="课程代码"
                    name="courseCode"
                    // rules={[{ required: true, message: "必填" }]}
                >
                    <Input placeholder="课程代码"/>
                </Form.Item>
                <Form.Item
                    label="系统编码"
                    name="sysCode"
                    rules={[{ required: true, message: "必填" }]}
                >
                    <Input placeholder="系统编码"/>
                </Form.Item>


                <Form.Item
                    label="课程分类"
                    name="courseCategory"
                    rules={[{ required: true, message: "必填" }]}
                >
                    <Select
                        placeholder="请选择课程分类"
                    >
                        <Option value="通用课">通用课</Option>
                        <Option value="政治理论课">政治理论课</Option>
                        <Option value="教学模式改革课">教学模式改革课</Option>
                    </Select>
                </Form.Item>


                <Form.Item
                    label="是否题卷库考试"
                    name="topicOrPaper"
                    rules={[{ required: true, message: "必填" }]}
                >
                    <Select
                        placeholder="请选择"
                    >
                        <Option value="试题库">试题库</Option>
                        <Option value="试卷库">试卷库</Option>
                        <Option value="无">无</Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    label="负责教研室"
                    name="leastDepartmentId"
                    rules={[{ required: true, message: "必填" }]}
                >
                    <TreeSelect
                        placeholder="请选择负责教研室"
                        allowClear
                        multiple
                        treeData={treeData}
                    />
                </Form.Item>

            </Form>
        </Modal>
    );
});

export default connect(({ course, dispatch }) => ({
    course,
    dispatch
}))(UserModal);
